<template>
  <div class="homework-review">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">{{ $t('assets.homeworkReview.title') }}</h1>
    </div>

    <!-- 功能卡片区 -->
    <div class="function-cards">
      <div class="function-card">
        <div class="card-icon" style="background-color: #e4eefb;">
          <img src="@/assets/homeworkCheck.png" alt="作业检查" />
        </div>
        <h3 class="card-title">{{ $t('assets.homeworkReview.homeworkCheck') }}</h3>
        <p class="card-description">{{ $t('assets.homeworkReview.homeworkCheckDesc') }}</p>
        <button class="card-button" @click="handleHomeworkCheck">{{ $t('assets.homeworkReview.homeworkCheckBtn') }}</button>
      </div>

      <div class="function-card">
        <div class="card-icon" style="background-color: #fae5da;">
          <img src="@/assets/history.png" alt="历史提交记录" />
        </div>
        <h3 class="card-title">{{ $t('assets.homeworkReview.historyRecords') }}</h3>
        <p class="card-description">{{ $t('assets.homeworkReview.historyRecordsDesc') }}</p>
        <button class="card-button" @click="handleHistoryRecords">{{ $t('assets.homeworkReview.viewHistoryBtn') }}</button>
      </div>

      <div class="function-card">
        <div class="card-icon" style="background-color: #e7ecfb;">
          <img src="@/assets/errorCollection.png" alt="错题集" />
        </div>
        <h3 class="card-title">{{ $t('assets.homeworkReview.errorCollection') }}</h3>
        <p class="card-description">{{ $t('assets.homeworkReview.errorCollectionDesc') }}</p>
        <button class="card-button" @click="handleErrorCollection">{{ $t('assets.homeworkReview.viewErrorCollectionBtn') }}</button>
      </div>
    </div>

    <!-- 最近记录区域 -->
    <div class="recent-records">
      <h2 class="section-title">{{ $t('assets.homeworkReview.recentRecords') }}</h2>
      
      <!-- 作业状态标签 -->
      <div class="status-tabs">
        <div class="custom-tabs">
          <button
            v-for="tab in statusTabs"
            :key="tab.key"
            :class="['status-tab', { active: activeCategory === tab.key }]"
            @click="setActiveCategory(tab.key)"
          >
            {{ tab.label }}
          </button>
        </div>
      </div>

      <!-- 搜索表单 - 暂时注释掉
        <el-form :inline="true" :model="filterForm" class="search-form">
          <el-form-item :label="$t('assets.homeworkReview.taskTime') + ':'">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              :range-separator="$t('common.to')"
              :start-placeholder="$t('assets.homeworkReview.startDate')"
              :end-placeholder="$t('assets.homeworkReview.endDate')"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
              style="width: 300px;"
              :teleported="false"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetFilter">{{ $t('common.reset') }}</el-button>
            <el-button type="primary" @click="applyFilter">{{ $t('common.search') }}</el-button>
          </el-form-item>
        </el-form>
      -->

      <!-- 记录卡片列表 -->
      <div class="records-grid">
        <RecordCard
          v-for="record in filteredRecords"
          :key="record.id"
          :record="record"
          :routeName="'student-homework-review'"
          @detail="handleRecordDetail"
          @delete="handleRecordDelete"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import RecordCard from '@/components/shared/Common/RecordCard.vue'
import { t as $t } from '@/plugins/simpleI18n'

const router = useRouter()

// 作业状态标签数据 - 只保留三个标签
const statusTabs = [
  { key: 'all', label: '全部' },
  { key: 'homework-check', label: '作业检查' },
  { key: 'teaching-task', label: '教学任务' }
]

// 当前选中的分类
const activeCategory = ref('all')

// 筛选表单数据
const filterForm = ref({
  startDate: '',
  endDate: ''
})

// 日期范围选择器
const dateRange = ref<[string, string] | null>(null)

// 模拟记录数据 - 学生自己的作业记录
const records = ref([
  {
    id: 1,
    title: '数学作业-第一章练习',
    time: new Date('2024-10-14 09:30:00'),
    status: 'submitted'
  },
  {
    id: 2,
    title: '语文作业-古诗词背诵',
    time: new Date('2024-10-14 10:15:00'),
    status: 'graded'
  },
  {
    id: 3,
    title: '英语作业-单词练习',
    time: new Date('2024-10-13 14:20:00'),
    status: 'correction'
  },
  {
    id: 4,
    title: '数学作业-几何证明',
    time: new Date('2024-10-13 16:45:00'),
    status: 'corrected'
  },
  {
    id: 5,
    title: '语文作业-作文练习',
    time: new Date('2024-10-12 11:30:00'),
    status: 'completed'
  },
  {
    id: 6,
    title: '英语作业-阅读理解',
    time: new Date('2024-10-12 15:20:00'),
    status: 'submitted'
  },
  {
    id: 7,
    title: '数学作业-函数练习',
    time: new Date('2024-10-11 09:15:00'),
    status: 'graded'
  },
  {
    id: 8,
    title: '语文作业-文言文翻译',
    time: new Date('2024-10-11 13:40:00'),
    status: 'completed'
  }
])

// 根据状态筛选记录
const filteredRecords = computed(() => {
  let filtered = records.value

  // 按状态筛选
  if (activeCategory.value !== 'all') {
    // 根据新的标签类型进行筛选
    if (activeCategory.value === 'homework-check') {
      // 作业检查：显示已提交和已批改的作业
      filtered = filtered.filter(record => ['submitted', 'graded'].includes(record.status))
    } else if (activeCategory.value === 'teaching-task') {
      // 教学任务：显示需要订正和已完成的作业
      filtered = filtered.filter(record => ['correction', 'corrected', 'completed'].includes(record.status))
    }
  }

  // 按时间筛选
  if (filterForm.value.startDate) {
    const startDate = new Date(filterForm.value.startDate)
    filtered = filtered.filter(record => record.time >= startDate)
  }

  if (filterForm.value.endDate) {
    const endDate = new Date(filterForm.value.endDate)
    endDate.setHours(23, 59, 59, 999) // 设置为当天结束时间
    filtered = filtered.filter(record => record.time <= endDate)
  }

  return filtered
})

// 设置活跃分类
const setActiveCategory = (category: string) => {
  activeCategory.value = category
}

// 处理日期范围变化
const handleDateRangeChange = (dates: [string, string] | null) => {
  if (dates) {
    filterForm.value.startDate = dates[0]
    filterForm.value.endDate = dates[1]
  } else {
    filterForm.value.startDate = ''
    filterForm.value.endDate = ''
  }
}

// 应用筛选
const applyFilter = () => {
  console.log('应用筛选条件:', filterForm.value)
}

// 重置筛选条件
const resetFilter = () => {
  filterForm.value.startDate = ''
  filterForm.value.endDate = ''
  dateRange.value = null
}



// 功能卡片点击事件 - 学生视角
const handleHomeworkCheck = () => {
  console.log('点击作业检查')
  // 跳转到相机拍摄页面 - 学生提交作业
  router.push({
    path: '/camera-capture',
    query: {
      fromRoute: 'student-homework-review',
      context: 'homework-submit'
    }
  })
}

const handleHistoryRecords = () => {
  console.log('点击查看提交记录')
  // 跳转到学生提交记录列表页面
  router.push('/student/homework-review/submission-history')
}

const handleErrorCollection = () => {
  console.log('点击查看错题集')
  // 跳转到学生错题集列表页面
  router.push('/student/homework-review/error-collection')
}

// 记录操作事件
const handleRecordDetail = (record: any) => {
  console.log('查看详情:', record)
  // TODO: 实现详情查看逻辑
}

const handleRecordDelete = (record: any) => {
  console.log('删除记录:', record)
  // TODO: 实现删除逻辑
}
</script><style
 scoped>
.homework-review {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 功能卡片区 */
.function-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.function-card {
  background: #f9f9fb;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.function-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.card-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.card-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.card-button {
  background: #303133;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  float: right;
}

.card-button:hover {
  background: #606266;
  transform: translateY(-1px);
}

/* 最近记录区域 */
.recent-records {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 24px 0;
}

/* 作业状态标签 */
.status-tabs {
  margin-bottom: 24px;
}

.custom-tabs {
  display: flex;
  gap: 16px;
  align-items: center;
}

.status-tab {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #909399;
  background: transparent;
  border: none;
  border-radius: 20px;
  outline: none;
}

.status-tab.active {
  color: #409EFF;
  background-color: #f0f0f0;
}

.status-tab:hover:not(.active) {
  color: #606266;
}

/* 筛选功能栏 */
.filter-section {
  margin-bottom: 24px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.date-input {
  width: 140px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  background: #fff;
  outline: none;
  transition: border-color 0.3s ease;
}

.date-input:focus {
  border-color: #409eff;
}

.date-input::-webkit-calendar-picker-indicator {
  display: none;
}

.date-separator {
  color: #909399;
  font-size: 14px;
}

.calendar-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #c0c4cc;
  pointer-events: none;
}

/* 记录卡片网格 */
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .homework-review {
    padding: 16px;
  }

  .function-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  .records-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .status-tabs {
    gap: 24px;
  }

  .filter-section {
    padding: 12px 0;
  }

  .date-range-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .date-input {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 20px;
  }

  .function-card {
    padding: 20px;
  }

  .card-icon {
    width: 56px;
    height: 56px;
  }

  .card-icon img {
    width: 28px;
    height: 28px;
  }

  .recent-records {
    padding: 16px;
  }
}
</style>